<template>
	<view class="root f1 oh">
		<block v-if="categories.length">
			<label class="bgc-fff br-34" :style="{ margin: `12rpx 30rpx`, padding: `12rpx 30rpx` }">
				<uni-icons type="search" color="#ccc" />
				<input
					:style="{ zIndex: 0 }"
					class="f1 ml-12 color-28 fs-30"
					type="text"
					placeholder="搜索商品"
					placeholder-style="color: #ccc"
					v-model="keywords"
					confirm-type="search"
					@confirm="search"
				/>
			</label>
			<view class="f1 oh fd-row">
				<scroll-view :show-scrollbar="false" scroll-y :style="{ paddingBottom: `70px` }">
					<label
						v-for="(category, index) in categories"
						:key="index"
						:class="[{ active: categoryIndex === index }, 'category']"
						@click="chooseCategory(index)"
					>
						<text>{{ category.name }}</text>
					</label>
				</scroll-view>
				<scroll-view
					scroll-y
					class="f1 oh bgc-fff"
					@scrolltolower="getListData"
					:style="{ paddingBottom: `70px` }"
				>
					<label class="height-30" />
					<block v-for="(commodity, index) in commodities.list" :key="index">
						<navigator
							:url="`/pages/client/CommodityInfo?id=${commodity.id}`"
							class="fd-row ml-30 mr-30 bgc-fff"
							hover-class="none"
						>
							<image
								class="width-100percent br-8"
								:style="{ width: `170rpx`, height: `170rpx` }"
								:src="commodity.cover_image"
								mode="aspectFill"
							/>
							<view class="f1 oh jc-sa ml-18 fw-600">
								<text class="multi-ellipsis fs-26 color-333">
									{{ commodity.name }}
								</text>
								<view class="fd-row ai-center jc-sb">
									<text class="color-ef1b1b fs-32">
										￥{{ Number(commodity.price).toFixed(2) }}
									</text>
									<view
										class="br-circle width-46 height-46"
										:style="{
											display: `flex`,
											alignItems: `center`,
											justifyContent: `center`,
											backgroundImage: `linear-gradient(-22deg, #f4a754, #f45455)`,
										}"
										hover-class="tap-hover"
										hover-stay-time="100"
										@click.stop="addShoppingCart(commodity.id)"
									>
										<uni-icons type="plusempty" color="#fff" size="18" />
									</view>
								</view>
							</view>
						</navigator>
						<label class="height-50" />
					</block>

					<uni-load-more :status="loadStatus" />
				</scroll-view>
			</view>
		</block>
		<text v-else class="fs-32 color-666 text-center lh-5">暂无商品</text>
		<shopping-cart />
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import shoppingCart from "@/components/shoppingCart.vue";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component({ components: { shoppingCart } })
	export default class PlaceOrder extends Vue {
		// component property
		keywords: string = "";
		loadStatus: string = "loading";
		categories: AnyObject[] = [];
		categoryIndex: number = 0;

		commodities: Pager<AnyObject> = {
			list: [],
			page: 1,
			size: 30,
		};

		onLoad() {
			uni.startPullDownRefresh({});
		}

		onShow() {
			this.$store.dispatch("getShoppingCartData");
		}

		onPullDownRefresh() {
			this.$request.get("/shop/cateList").then(({ data }) => {
				this.categories = data;
				this.keywords = "";
				this.search();
				uni.stopPullDownRefresh();
			});
		}

		search() {
			this.commodities.list = [];
			this.commodities.page = 1;
			this.getListData();
		}

		chooseCategory(index: number) {
			if (requestFlag || this.categoryIndex === index) return;
			this.categoryIndex = index;
			this.keywords = "";
			this.search();
		}

		getListData() {
			const { $request, commodities, keywords, categories, categoryIndex } = this;

			if (requestFlag || !commodities.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/productList", {
					page: commodities.page,
					size: commodities.size,
					cate_id: categories[categoryIndex].id,
					keywords,
				})
				.then(({ data }) => {
					commodities.list.push(...data.data);
					commodities.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = commodities.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}

		addShoppingCart(id: number) {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/shop/addCart", { id, num: 1 }).then(({ msg: title }) => {
				this.$store.dispatch("getShoppingCartData");
				uni.showToast({ title });
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.category {
		width: 200rpx;
		overflow: hidden;
		line-height: 90rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		justify-content: center;
		font-size: 26rpx;
		color: #666;
		&.active {
			background-color: #fff;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		text {
			@extend .ellipsis;
			margin: 0 6rpx;
		}
	}
</style>